<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="../favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script src="js/black_jack.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.getElementById("root"));
      class Event extends React.Component {
        // 开始游戏
        beginGame = () => {
          this.setState({
            blackJack: new BlackJack(),
            isBegin: true,
          });
        };
        // 开始发牌
        beginDealCard = () => {
          this.state.blackJack.initPlayerAndDeal();
          let bankerBack = this.state.blackJack.addBack();
          this.setState({
            isShow: true,
            bankerBack: bankerBack,
          });
        };

        // 加牌
        addPorker = () => {
          this.state.blackJack.addCard(false);
          this.setState({
            isAddCard: true,
          });
        };

        // 开牌
        openCard = () => {
          this.state.blackJack.openBack(this.state.bankerBack);
          this.state.blackJack.comparePlay();
          this.setState({
            isBegin: false,
          });
        };
      }

      class App extends Event {
        constructor(props) {
          super(props);
          this.state = {
            blackJack: {},
            isShow: false,
            isBegin: false,
          };
        }
        render() {
          return (
            <div>
              <div>
                <PorkerShow
                  porkerImg={
                    this.state.isShow
                      ? this.state.blackJack.findBanker(true)
                      : ""
                  }
                />
              </div>
              <button disabled={this.state.isBegin} onClick={this.beginGame}>
                开始游戏
              </button>
              <button
                disabled={!this.state.isBegin}
                onClick={this.beginDealCard}
              >
                开始发牌
              </button>
              <button disabled={!this.state.isBegin} onClick={this.addPorker}>
                加牌
              </button>
              <button disabled={!this.state.isBegin} onClick={this.openCard}>
                开牌
              </button>
              <div>
                <PorkerShow
                  porkerImg={
                    this.state.isShow
                      ? this.state.blackJack.findBanker(false)
                      : ""
                  }
                />
              </div>
            </div>
          );
        }
      }
      root.render(<App />);

      function PorkerShow(props) {
        let listItem = [];
        let message = '';
        if (props.porkerImg) {
          let imgList = props.porkerImg.porkerList;
          listItem = imgList.map((item) => <img key={item} src={item} />);
          message = props.porkerImg.winnerState
        }

        return (
          <div>
            <div>{listItem}</div>
            <h1>{message}</h1>  
          </div>
        );
      }
    </script>
  </body>
</html>
